<!--部门管理 -->
<template>
  <!-- PRIV_TITTLE_CREATE 新增字典标题 - 权限表示 -->
  <div class="app-container main flex-box c-c-c">
    <el-row :gutter="20" class="search_box">
      <el-col>
        <el-form
          ref="queryForm"
          :model="searchData"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item label="分组名称">
            <el-input
              v-model.trim="searchData.name"
              placeholder="请输入要查询的分组名称"
              clearable
              @keyup.enter.native="GetList"
              @clear="GetList"
            />
          </el-form-item>
          <el-form-item label="部门状态">
            <el-select
              v-model="searchData.deptID"
              filterable
              placeholder="请选择父级标题"
              @change="GetList"
            >
              <el-option :label="'全部部门'" :value="-1" />
              <el-option
                v-for="item in departmentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- icon="el-icon-search" -->
            <el-button type="primary" @click="GetList">搜索</el-button>
            <!-- icon="el-icon-refresh" -->
            <el-button @click="ReData">重置 </el-button>
          </el-form-item>
          <!--  v-permission="['PRIV_TITTLE_CREATE']" -->
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="btn_list">
      <el-col>
        <el-button type="primary" @click="OpenAddTitle()">新增分组</el-button>
      </el-col>
    </el-row>
    <el-row class="list_box">
      <el-table
        v-loading="loading"
        height="100%"
        ref="grouping"
        :data="list"
        row-key="id"
        stripe
        border
        :default-sort="{ prop: searchData.orderBy, order: searchData.sort }"
        @sort-change="handleSortable"
      >
        <el-table-column
          type="index"
          :index="handleIndexCalc"
          label="#"
          align="center"
        />
        <el-table-column
          prop="name"
          label="分组名称"
          width="140"
          align="center"
        />
        <el-table-column
          prop="deptName"
          label="所属部门"
          align="center"
          width="140"
        />
        <el-table-column
          prop="scopeName"
          :show-overflow-tooltip="true"
          label="查看范围"
          align="center"
        />
        <el-table-column label="是否接单" align="center">
          <template slot-scope="scope">
            <div class="state_department" v-if="scope.row.isTack == 1">
              {{ scope.row.isTackName }}
            </div>
            <div v-else>
              {{ scope.row.isTackName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          align="center"
          sortable
        />
        <el-table-column
          prop="updateTime"
          label="修改时间"
          align="center"
          sortable
        />
        <el-table-column
          label="操作"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              class="edit_list_btn list_btn"
              v-permission="['PRIV_POWERS_UPDATE']"
              type="info"
              size="mini"
              @click="EditTitle(scope.row)"
              >编辑</el-button
            >
            <!--  icon="el-icon-delete" -->
            <el-button
              class="del_list_btn list_btn"
              v-permission="['PRIV_POWERS_DELETE']"
              type="danger"
              size="mini"
              @click="handleDelete(scope.row)"
              >删除组别</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <m-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form
        ref="addData"
        :model="addData"
        :rules="rules"
        label-width="80px"
        class="add_data_form"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="所属部门" prop="deptID">
              <el-select
                v-model="addData.deptID"
                filterable
                placeholder="请选择部门类型"
              >
                <el-option
                  v-for="item in departmentList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分组名称" prop="name">
              <el-input
                v-model.trim="addData.name"
                maxlength="50"
                placeholder="请输入分组名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label=" 查看范围" prop="scope">
              <el-radio-group v-model="addData.scope">
                <el-radio
                  :label="item.value"
                  v-for="item in groupingPrivilegesList"
                  :key="item.optionId"
                >
                  {{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否接单" prop="isTack">
              <el-radio-group v-model="addData.isTack">
                <el-radio
                  :label="item.value"
                  v-for="item in isTrueList"
                  :key="item.optionId"
                >
                  {{ item.label }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SubmitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </m-dialog>
    <el-row :gutter="20" class="pagination_box">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchData.pageIndex"
        :limit.sync="searchData.pageSize"
        @pagination="GetList"
      />
    </el-row>
  </div>
</template>
<script type="javascript/text">

import {
    queryOption,
    // @ts-ignore
} from "@/api/system/options";
import {
    getDepartmentList
    // @ts-ignore
} from "@/api/users/department";
import {
    getGrouping,
    addGrouping,
    editGrouping,
    getOneGrouping,
    delOneGrouping,
    // @ts-ignore
} from "@/api/users/grouping";
import { getToken, setToken, removeToken } from "@/utils/auth";
// @ts-ignore
import { Edit } from "vxe-table";
import H5Box from "../../../components/H5Box/H5Box.vue";
export default {
    components: { H5Box },
    data() {
        return {
            /**请求参数 */
            searchData: {
                // label: "",
                name: "",
                deptID: -1,
                orderBy: "updateTime",
                sort: "descending",
                pageIndex: 1,
                pageSize: 20,
            },
            /**总数 */
            total: 0,
            /**列表数据 */
            list: [],
            /**备份列表数据 */
            backupList: [],
            // 遮罩层
            loading: true,
            /**添加参数 */
            addData: {
                name: "",
                deptID: "",
                scope: ' 0',
                isTack: '1',
                id: undefined
            },
            /**新增的对话框标题 */
            title: "",
            /**开关 */
            open: false,
            // 表单校验
            rules: {
                name: [{ required: true, message: "分组名称不能为空", trigger: "blur" }],
                deptID: [
                    { required: true, message: "所属部门不能为空", trigger: "blur" },
                ],
            },

            /**是否启用 */
            isTrueList: [],
            /**所有部门数据 */
            departmentList: [],
            /**分组哈看权限 */
            groupingPrivilegesList: []
        };
    },
    methods: {

        /**获取部门类型数据 状态等数据*/
        async GetTypeList() {
            /**获取所有部门 */
            let department = await getDepartmentList({
                name: "",
                isTack: -1,
                orderBy: "updateTime",
                sort: "descending",
                pageIndex: 1,
                pageSize: 2000,
            });
            if (department.statusCode != 200) return;
            this.departmentList = department.data.dataSource
            /**是否启用 */
            let res = await queryOption({
                dictID: 12,
                orderby: "updateTime",
                pageIndex: 1,
                pageSize: 1000,
                sort: "ascending"
            });
            if (res.statusCode != 200) return;
            this.isTrueList = res.data.dataSource
            let row = await queryOption({
                dictID: 14,
                orderby: "updateTime",
                pageIndex: 1,
                pageSize: 1000,
                sort: "ascending"
            });
            if (row.statusCode != 200) return;
            this.groupingPrivilegesList = row.data.dataSource
            this.GetList()
        },
        /*,*获取分组数据 */
        async GetList() {
            // @ts-ignore
            let { data, statusCode } = await getGrouping(this.searchData);
            if (statusCode != 200) return;
            this.list = data.dataSource;
            this.backupList = JSON.parse(JSON.stringify(data.dataSource));
            this.total = data.totalCount;
            this.loading = false;
        },
        /**重置请求数据 */
        ReData() {
            this.searchData = {
                name: "",
                deptID: -1,
                orderBy: "updateTime",
                sort: "descending",
                pageIndex: 1,
                pageSize: 20,
            };
            this.$refs.grouping.sort('updateTime', 'descending')
            this.GetList();
        },
        /**新增字典标题 */
        OpenAddTitle() {
            this.title = "新增分组";
            this.addData = {
                name: "",
                deptID: "",
                scope: '0',
                isTack: '1',
                id: undefined,
            };
            this.open = true;
        },
        /**编辑字典标题 */
        async EditTitle(row) {
            this.title = "编辑分组";
            // @ts-ignore
            let { data, statusCode } = await getOneGrouping(row.id);
            if (statusCode != 200) return;
            data.scope = data.scope.toString()
            data.isTack = data.isTack.toString()
            this.addData = data;
            this.open = true;
        },
        // 自动计算分页 Id
        handleIndexCalc(index) {
            return (
                (this.searchData.pageIndex - 1) * this.searchData.pageSize + index + 1
            );
        },
        /** 提交按钮 */
        SubmitForm() {
            // @ts-ignore
            this.$refs["addData"].validate(async (valid) => {
                if (valid) {
                    if (this.addData.id != undefined) {
                        // @ts-ignore
                        let { statusCode } = await editGrouping(this.addData);
                        if (statusCode != 200) return;
                    } else {
                        let { statusCode } = await addGrouping(this.addData);
                        if (statusCode != 200) return;

                    }
                    // @ts-ignore
                    this.$message({
                        message: "添加成功",
                        type: "success",
                        center: true,
                    });
                    this.open = false;
                    this.GetList();
                }
            });
        },
        /**删除字典标题 */
        async handleDelete(row) {
            // @ts-ignore
            this.$confirm(
                `此操作将永久删除该分组信息（${row.name}）, 是否继续?`,
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(async () => {
                    // @ts-ignore
                    let { statusCode } = await delOneGrouping(row.id);
                    if (statusCode != 200) return;
                    // @ts-ignore
                    this.$message({
                        message: "删除成功",
                        type: "success",
                        center: true,
                    });
                    this.GetList();
                })
                .catch(() => {
                    this.GetList();
                });
        },
        /**修改排序字段 */
        handleSortable(val) {
            this.searchData.orderBy = val.prop;
            this.searchData.sort = val.order;
            this.GetList();
        },
    },

    created() {
        this.GetTypeList();
    },
    mounted() { },
};
</script>
<style lang="scss" scoped src="./index.scss"></style>
